<template>
  <div>
    <!-- 头部 -->
    <a-form ref="formRef" :rules="rules" :model="form" :hideRequiredMark="true">
      <a-row>
        <a-col :span="8">
          <a-form-item name="portValue">
            <a-select
              ref="select"
              v-model:value="form.portValue"
              style="width: 200px"
              @focus="focus"
              @change="handleChange"
              placeholder="请选择端口"
            >
              <a-select-option
                v-for="item in ports"
                :value="item.name"
                :key="item.id"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item name="inputValue">
            <a-input
              v-model:value="form.inputValue"
              placeholder="请输入搜索内容"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1">
          <a-button type="primary" @click="search">搜索</a-button></a-col
        >
      </a-row>
    </a-form>

    <!-- 添加时间 -->
    <a-card style="margin: 20px 0px; background: #e6e6e6">
      <a-row>
        <a-col :span="3"
          ><div style="font-weight: bolder">添加时间：</div></a-col
        >

        <a-col
          :span="2"
          v-for="(item, index) in timeList"
          :key="item.id"
          :class="index == timeListAct ? 'act-font-color' : ''"
          @click="changeTimeAct(index)"
          >{{ item.name }}</a-col
        >

        <a-col :span="7">
          <a-range-picker
            v-model:value="ordertime"
            style="width: 100%"
            :ranges="ranges"
            show-time
            format="YYYY/MM/DD HH:mm:ss"
            @change="panelChange"
          />
        </a-col>
        <a-col :span="2" :offset="2"
          ><a-button type="primary" @click="filter">筛选</a-button></a-col
        >
      </a-row>
    </a-card>
    <!-- 列表 -->

    <a-table
      :columns="columns"
      :data-source="dataSource"
      bordered
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #title
        ><a-button type="primary" v-has="{ a: $route, b: 2 }" @click="add"
          >新增</a-button
        ></template
      >
      <template #operation="{ record }">
        <a-button
          type="link"
          @click="edit(record.key)"
          v-has="{ a: $route, b: 2 }"
          >编辑</a-button
        >
        <a-button
          type="link"
          @click="look(record.key)"
          v-has="{ a: $route, b: 1 }"
          >查看</a-button
        >
        <a-button
          type="link"
          danger
          @click="del(record.key)"
          v-has="{ a: $route, b: 2 }"
          >删除</a-button
        >
      </template>
    </a-table>
  </div>
</template>
<script>
import {
  reactive,
  ref,
  watch,
  computed,
  defineComponent,
  createVNode,
} from "vue";
import {
  CheckOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import { Modal } from "ant-design-vue";
import { useModal } from "@/hooks"

export default {
  components: {
    CheckOutlined,
    EditOutlined,
    ExclamationCircleOutlined,
  },
  setup() {
    const portValue = ref("请选择端口");
    const ordertime = ref(""); //添加时间
    const timeListAct = ref(0); //默认添加时间：全部
    const formRef = ref("");
    const form = reactive({
      portValue: "用户端",
      inputValue: "",
    });
    const rules = {
      portValue: [
        { required: true, message: "请选择端口!", trigger: "change" },
      ],
      inputValue: [
        { required: true, message: "请输入搜索内容!", trigger: "blur" },
      ],
    };

    const loading = ref(false); //表格的加载

    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 5,
    });

    //   端口列表
    const ports = reactive([
      {
        name: "用户端",
        id: 1,
      },
      {
        name: "护士端",
        id: 1,
      },
    ]);
    const timeList = reactive([
      { name: "全部", id: 1 },
      { name: "今天", id: 2 },
      { name: "本周", id: 3 },
      { name: "本月", id: 4 },
      { name: "本季度", id: 5 },
    ]);
    // 查询
    const search = () => {
      console.log(form, "表单内容");
      formRef.value
        .validate()
        .then(() => {
          console.log("values", formState, toRaw(formState));
        })
        .catch((error) => {
          console.log("error", error);
        });
    };
    // 选择时间
    const panelChange = (date, dateString) => {
      console.log("选择的时间是", dateString);
    };
    // 筛选
    const filter = () => {
      console.log(timeListAct.value, "时间");
    };
    const changeTimeAct = (index) => {
      timeListAct.value = index;
    };

    const columns = [
      {
        title: "编号",
        dataIndex: "id",
        className: "table",
      },
      {
        title: "内容标题",
        dataIndex: "title",
        className: "table",
      },
      {
        title: "所属分类位置",
        dataIndex: "address",
        className: "table",
      },
      {
        title: "浏览量",
        dataIndex: "views",
        className: "table",
      },
      {
        title: "状态",
        dataIndex: "status",
        className: "table",
      },
      {
        title: "上传时间",
        dataIndex: "time",
        className: "table",
      },
      {
        title: "操作",
        dataIndex: "operation",
        className: "table",
        slots: {
          customRender: "operation",
        },
      },
    ];
    const dataSource = [
      {
        key: "1",
        id: "John Brown",
        title: "￥300,000.00",
        address: "New York No. 1 Lake Park",
        views: "12",
        status: "状态",
        time: "1020202",
      },
    ];

    for (let i = 0; i < 20; i++) {
      dataSource.push({
        key: i + 2,
        id: i,
        title: "￥300,000.00",
        address: "New York No. 1 Lake Park",
        views: "12",
        status: "状态",
        time: "1020202",
      });
    }

    // 分页器
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ["10", "20", "30"],
      showTotal: (total, range) => {
        return "共" + total + "条";
      },
      total: 0,
      showQuickJumper: true,
      showSizeChanger: true,
    }));

    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      console.log(pagination, "当前分页");
      page.current = pagination.current;
      page.pageSize = pagination.pageSize;

      // 请求列表接口
    };

    // 新增
    const add = () => {};
    // 编辑
    const edit = () => {};

    // 查看
    const look = (key) => {};
    // 删除
    const del = (key) => {
      const {closeModal} = useModal.confirm({
        title: () => "你确定删除当前项吗?",
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () =>
          createVNode(
            "div",
            {
              style: "color:#faad14;",
            },
            "删除当前数据后不可恢复，请谨慎考虑。"
          ),
        class: "test",
      });
    };
    return {
      ports,
      formRef,
      form,
      rules,
      ordertime,
      timeList,
      timeListAct,
      dataSource,
      columns,
      loading,
      pagination,
      handleTableChange,
      search,
      filter,
      panelChange,
      changeTimeAct,
      add,
      del,
      edit,
      look,
    };
  },
};
</script>
<style scoped lang="less">
.act {
  color: #2a9d8f;
}
</style>
